16～69歳の視覚障がい者の 91.7% が
インターネットを利用しています。

視覚障がい者のための
Web アクセシビリティ
入門以前

視覚障がい者の Web 利用方法

全盲

主に音声読み上げソフトを利用

ロービジョン（昔は弱視と呼ばれた）

見え方や見えやすい条件に多様な個人差がある
Web 利用方法も様々

• 音声読み上げソフトを利用
• 配色・文字サイズ等を変更して利用（カスタム CSS 等）
• 画面拡大ソフトを利用
• 画面解像度を調整
• ディスプレイにレンズをあてて物理的に拡大

音声読み上げソフト

スクリーンリーダー

PC-Talker	41,040 円（税込）	国内シェア 85.3%
JAWS	153,360 円（税込）
NVDA	無料	オープンソース
ナレーター	Windows 標準付属	Ctrl + Win + Enter
VoiceOver	macOS, iOS 標準付属

音声ブラウザー

NetReaderⅡ	30,240円（税込）	要 PC-Talker
IBM Home Page Reader	販売終了	IE 6 まで
ALTAIRアルティア	無料	DL リンク切れ...

視覚障がい者を意識したマークアップ

• img 要素に alt 属性（代替テキスト）をつける
• ページの内容がわかるページタイトルをつける
• 1 つのページにコンテンツを詰め込み過ぎない
• サイト内検索機能を提供する
• フォームコントロール要素にラベルを付ける
• 意味のあるタグを使う（なんでもかんでも div にしない）
• 意味のあるリンクテキストにする（悪い例: “こちら”）
• すべての機能をキーボードから利用できるようにする
• 色を唯一の情報伝達手段にしない
  （例: エラーを赤で表現するだけでなくエラー的文言も出す）
• 前景と背景の間に十分なコントラストを提供する
• 勝手に動きだすコンテンツ（例: カルーセル）には
  止める手段を提供する
• 無限スクロールを使わない

もっとほしいひとへ

Web Content Accessibility Guidelines (WCAG) 2.0

パッと見ハードル高そうな印象を受けるけど文章は割と平易

ガイドライン 1.1 テキストによる代替: すべての非テキストコンテンツには、拡大印刷、点字、音声、シンボル、平易な言葉などの利用者が必要とする形式に変換できるように、テキストによる代替を提供すること。

ガイドライン 2.1 キーボード操作可能: すべての機能をキーボードから利用できるようにすること。

目次ぐらい目を通しても損にはならない

音声読み上げソフトを意識したマークアップ

こんなときどうしよう

1. アイコンボタンの用途を読み上げてほしいけど画面には出したくない
2. 見た目を派手にするためだけの要素を読み飛ばしてほしい
3. 「タブ」など HTML タグにない意味を要素に与えたい

1. アイコンボタンの用途を読み上げてほしいけど画面には出したくない

<button class="icon-button" aria-label="お気に入りに追加">
  <i class="mdi mdi-star"></i>
</button>

2. 見た目を派手にするためだけの要素を読み上げてほしくない

<p>この要素は読み上げられます</p>
<p aria-hidden="true">この要素は読み上げられません</p>

3. 「タブ」など HTML タグにない意味を要素に与えたい

<div role="tablist" aria-label="Entertainment">
  <button role="tab" aria-selected="true" aria-controls="nils-tab" id="nils">
    Nils Frahm
  </button>
  <button role="tab" aria-selected="false" aria-controls="agnes-tab" id="agnes" tabindex="-1">
    Agnes Obel
  </button>
</div>
<div tabindex="0" role="tabpanel" id="nils-tab" aria-labelledby="nils">
  <p>Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.</p>
</div>
<div tabindex="0" role="tabpanel" id="agnes-tab" aria-labelledby="agnes" hidden="">
  <p>Agnes Caroline Thaarup Obel is a Danish singer/songwriter. Her first album, Philharmonics, was released by PIAS Recordings on 4 October 2010 in Europe. Philharmonics was certified gold in June 2011 by the Belgian Entertainment Association (BEA) for sales of 10,000 Copies.</p>
</div>

role 属性や aria-* 属性を規定する W3C 勧告

WAI-ARIA

WAI-ARIA 属性がたくさんあって覚えきれない

WAI-ARIA 属性がたくさんあって覚えきれない

• WAI-ARIA Authoring Practices に WAI-ARIA 属性の
  使い方と具体例があるのでマネすると話が早い
  （先ほどのタブの例はここから拝借した）

  WAI-ARIA Authoring Practices 1.1

  https://www.w3.org/TR/wai-aria-practices/

• WAI-ARIA 属性を勝手に付与してくれるような
  コンポーネントライブラリを選べば話が超早い
  jQuery UI や Material UI (React)、 Element (Vue.js) など

• そもそもなるべく使わない方が良いものなので
  必死に覚えなくていいと思う。個人的には。

視覚障がい者を意識した Web コンテンツ

こんなときどうしよう

• ボット対策したい
  （利用者がボットではなくヒトであることを確認したい）

ボット対策

CAPTCHA （画像認証）

歪んだ文字画像を表示して文字に起こさせることで
利用者が人間であることを確認するツール

画像の代わりに音声を文字に起こす CAPTCHA もある

画像だけの CAPTCHA は視覚障がい者の大敵

ボット対策

No CAPTCHA reCAPTCHA

チェックボックスをクリックするだけで
利用者が人間であることを確認するツール

マウスの動きなどから人間か機械かを判断するらしい
画像／音声 CAPTCHA もオプションとして提供される

アクセシビリティチェックツール

miChecker （エムアイチェッカー）

JIS X 8341-3:2016 (== WCAG 2.0) に基づく
ウェブアクセシビリティ対応の取組を支援するために
総務省が開発

インクルーシブデザインについて

↑ とても読みやすいアクセシビリティガイドラインになっていてオススメ

参考文献